import xinjian from './xianjian.scss'
import {
    Breadcrumb, Form, Input, Image, Select, Button, message,
    Upload, Radio, Space, DatePicker, Table, Tag, Checkbox
} from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { useState, useEffect } from 'react';
import { UploadOutlined, LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import moment from 'moment'
import AllData from '../../api/AllXie'
const XinjianAll = () => {
    const [time, setTime] = useState('')
    const [imgName, setImgName] = useState('')
    const returnNav = useNavigate()
    const locaValue = useLocation()
    let obj = {}
    useEffect(() => {
        if (locaValue.state == 1) {
            console.log(123123);
        }
        else {
            console.log(222222);
        }

    }, [])
    const [form] = Form.useForm()
    // 文本域内容
    const { TextArea } = Input;
    //上传
    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },

        onChange(info) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    // 上传视频表格
    const columns = [
        {
            title: '视频信息',
            dataIndex: 'videoMsg',
            key: 'videoMsg',
            width: 200,
            render: (_, record) => {
                return <div>
                    <Image
                        width={40}
                        src={record.imgSrc}
                    />
                    <span className='tableIndou'>{record.indouction}</span>
                </div>
            },
        },
        {
            title: '视频大小',
            dataIndex: 'videoBig',
            key: 'videoBig',
        },
        {
            title: '视频类型',
            dataIndex: 'videoType',
            key: 'videoType',
        },
        {
            title: '视频时长',
            key: 'videoTime',
            dataIndex: 'videoTime',

        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a>删除</a>

                </Space>
            ),
        },
    ];
    const data = [
        {
            key: '1',
            indouction: '西语系列课程1',
            imgSrc: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
            videoBig: '100.0MB',
            videoType: "MP4",
            videoTime: "09.00",

        },

    ];
    // 上传图片
    const getBase64 = (img, callback) => {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    };

    const beforeUpload = (file) => {
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';

        if (!isJpgOrPng) {
            message.error('You can only upload JPG/PNG file!');
        }

        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isLt2M) {
            message.error('Image must smaller than 2MB!');
        }

        return isJpgOrPng && isLt2M;
    };
    const [loading, setLoading] = useState(false);
    const [imageUrl, setImageUrl] = useState();

    const handleChange = (info) => {
        if (info.file.status === 'uploading') {
            setLoading(true);
            return;
        }

        if (info.file.status === 'done') {
            // Get this url from response in real world.
            setImgName(info.file.response.fileName)
            getBase64(info.file.originFileObj, (url) => {
                setLoading(false);
                setImageUrl(url);
            });
        }
    };

    const uploadButton = (
        <div>
            {loading ? <LoadingOutlined /> : <PlusOutlined />}
            <div
                style={{
                    marginTop: 8,
                }}
            >
                点击上传
            </div>
        </div>
    );
    // 上传资料
    const [fileList, setFileList] = useState([]);
    const [uploading, setUploading] = useState(false);
    const propsFile = {
        onRemove: (file) => {
            const index = fileList.indexOf(file);
            const newFileList = fileList.slice();
            newFileList.splice(index, 1);
            setFileList(newFileList);
        },
        beforeUpload: (file) => {
            setFileList([...fileList, file]);
            return false;
        },
        fileList,
    };
    // 售卖
    const { RangePicker } = DatePicker;
    const [size, setSize] = useState('small');
    const tijiao = () => {
        console.log(form.getFieldsValue());
        obj = { ...form.getFieldsValue() }
        obj.onTime = time
        obj.coverUrl = imgName
        console.log(obj);
        AllData.AddVideo(obj).then((res) => {
            console.log(res);
        })
    }
    // 返回上一个页面

    function returnGo() {
        if (locaValue.state == 1) {
            returnNav('/home/course/video')
        }
        else {
            returnNav('/home/course/audio')
        }
    }

    // s时间
    const onChange = (date, dateString) => {

        let date1 = moment(date).format('YYYY-MM-DD HH:mm:ss')
        console.log(date1, dateString);
        setTime(date1)
    };
    return <div style={xinjian} className="xinjians">
        <div className='top'>
            <Breadcrumb>
                <Breadcrumb.Item>课程管理</Breadcrumb.Item>
                <Breadcrumb.Item>
                    <a href="">音频课程</a>
                </Breadcrumb.Item>
                <Breadcrumb.Item>编辑音频课程</Breadcrumb.Item>
            </Breadcrumb>
            <h2 className='top-tit'>编辑音频课程</h2>
        </div>
        <div className="video-mid">
            <h3>基础信息</h3>
            <Form
                name="basic"
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 10,
                }}
                form={form}
                initialValues={{
                    coursefenlei: '1',
                    radioType: '1'
                }}
            >
                <Form.Item
                    label="图文名称"
                    name="videoName"
                    rules={[{ required: true, },]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    label='图文封面'
                    name='coverUrl'
                    rules={[{ required: true, },]}
                >
                    <Upload
                        name="avatar"
                        listType="picture-card"
                        className="avatar-uploader"
                        showUploadList={false}
                        action="/bbb/service_setting/fileRelevant/fileUpload"
                        beforeUpload={beforeUpload}
                        onChange={handleChange}
                    >
                        {imageUrl ? (
                            <img
                                src={imageUrl}
                                alt="avatar"
                                style={{
                                    width: '100%',
                                }}
                            />
                        ) : (
                            uploadButton
                        )}
                    </Upload>

                </Form.Item>
                <Form.Item
                    label="课程分类"
                    name="classId"
                    rules={[{ required: true, },]}
                >
                    <Select>
                        <Select.Option value="1">一级类目</Select.Option>
                        <Select.Option value="2">二级类目</Select.Option>
                    </Select>
                </Form.Item>
                <Form.Item label="课程描述" name='classDescribe'>
                    <TextArea rows={4} />
                </Form.Item>
                <Form.Item name='classType' label="课程类型">
                    <Radio.Group >
                        <Radio value="1"> 单节课 </Radio>
                        <Radio value="2"> 系列课程 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item name='dataUrl' label="上传资料">
                    <Upload {...props}>
                        <Button icon={<UploadOutlined />}>上传视频</Button>
                    </Upload>
                    <p className='p-miaoshu'>支持mp4，avi，wmv，mov，flv，rmvb，3gp，m4v，mkv格式；单个文佳最大不超过10G</p>
                    <Table columns={columns} dataSource={data}
                        pagination={false} />
                </Form.Item>
                <Form.Item name='provedTimeLength' label="试看功能" valuePropName="checked">
                    <Checkbox>免费试看前</Checkbox>
                    <Input suffix="分" style={{ width: 180 }} placeholder="请输入" />
                </Form.Item>
                <Form.Item name='dataUrl' label="上传资料">
                    <Upload {...propsFile}>
                        <Button icon={<UploadOutlined />}>点击上传</Button>
                    </Upload>
                    <p className='p-miaoshu'>支持Word/Excel/PDF格式，大小不超过50M</p>
                </Form.Item>

            </Form>

        </div>
        <div className='shoumai'>
            <h3>售卖信息</h3>
            <Form
                name='ba'
                labelCol={{
                    span: 4,
                }}
                wrapperCol={{
                    span: 10,
                }}
                form={form}
                initialValues={{
                    radiogroup: '1'
                }}
            >
                <Form.Item
                    label="课程价格"
                    name="price"
                    rules={[{ required: true, },]}
                >
                    <Input suffix="元" />
                </Form.Item>
                <Form.Item
                    label="库存"
                    name="inventory"
                >
                    <Input placeholder='请输入' />
                </Form.Item>
                <Form.Item name="onState" label="上架时间" rules={[{ required: true, },]}>
                    <Radio.Group>
                        <Space direction="vertical">
                            <Radio value="1">立即上架</Radio>
                            <Radio value="2">定时上架</Radio>
                            <Radio value="3">暂不上架</Radio>
                        </Space>
                    </Radio.Group>

                </Form.Item>
                <Form.Item name="onTime" className='times' wrapperCol={{ span: 24 }}>
                    <Space direction="vertical">
                        <DatePicker onChange={onChange} />
                    </Space>
                </Form.Item>

                <Form.Item>
                    <Space className='Btnanniu'>
                        <Button type='primary' onClick={tijiao}>提交</Button>
                        <Button className='quxiao' onClick={returnGo}>返回</Button>

                    </Space>
                </Form.Item>
            </Form>
        </div>

    </div>
}
export default XinjianAll